<template>
  <el-form ref="selectForm" :model="selectData">
    <el-form-item label="用户名" prop="request.username">
      <el-input
        v-model="selectData.request.username"
        style="width: 240px"
        placeholder="Please input"
        clearable
      />
    </el-form-item>
    <el-form-item label="地区" prop="request.region">
      <el-input
        v-model="selectData.request.region"
        style="width: 240px"
        placeholder="Please input"
        clearable
      />
    </el-form-item>
    <el-form-item label="性别" prop="request.sex">
      <el-select
        v-model="selectData.request.sex"
        clearable
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in sexOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期" prop="request.birthdayTime">
      <div class="demo-date-picker">
        <div class="block">
          <el-date-picker
            v-model="birthdayTime"
            type="daterange"
            unlink-panels
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :size="size"
            @change="birthdayTimeHandleDateRangeChange"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="工作日期" prop="request.workTime">
      <div class="demo-date-picker">
        <div class="block">
          <el-date-picker
            v-model="workTime"
            type="daterange"
            unlink-panels
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :size="size"
            @change="workTimeHandleDateRangeChange"
          />
        </div>
      </div>
    </el-form-item>
    <el-button type="primary" :icon="Search" @click="selectUserPageInfo">查询</el-button>
    <el-button type="primary" @click="resetForm">重置</el-button>
  </el-form>
  <el-table :data="resultData" border style="width: 100%">
    <el-table-column prop='id' label="序号" width="100"></el-table-column>
    <el-table-column prop='username' label="用户名" width="100"></el-table-column>
    <el-table-column prop='nickName' label="昵称" width="100"></el-table-column>
    <el-table-column prop='sex' label="性别" width="100"></el-table-column>
    <el-table-column prop='region' label="地区" width="100"></el-table-column>
    <el-table-column prop='birthdayTime' label="出生日期" width="100"></el-table-column>
    <el-table-column prop='workTime' label="工作时间" width="100"></el-table-column>
    <el-table-column label="操作">
      <template v-slot:default="scope">
        <el-button size="small" @click="editFormDialog(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="editDialog" title="编辑用户" width="500">
    <el-form :model="updateUser">
      昵称：
      <el-input v-model="updateUser.nickName" placeholder="昵称" autocomplete="off" />
      性别：
      <el-input v-model="updateUser.sex" placeholder="性别" autocomplete="off" />
      <div class="block">
        出生日期：<br>
        <el-date-picker
          v-model="updateUser.birthdayTime"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="date"
          placeholder="出生日期"
        />
      </div>
      <div class="block">
        工作日期：<br>
        <el-date-picker
          v-model="updateUser.workTime"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="date"
          placeholder="工作日期"
        />
      </div>
      地区：
      <el-select v-model="updateUser.region" placeholder="地区">
        <el-option label="Zone No.1" value="shanghai" />
        <el-option label="Zone No.2" value="beijing" />
      </el-select>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">取消</el-button>
        <el-button type="primary" @click="editUserPageInfo">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, watch } from 'vue'
import api from '../utils/api'
import { ref } from 'vue'
const selectForm = ref(null)
let editDialog = ref(false)
const birthdayTimeStart = ref(null)
const birthdayTimeEnd = ref(null)
const birthdayTime = ref([birthdayTimeStart.value, birthdayTimeEnd.value])
const workTimeStart = ref(null)
const workTimeEnd = ref(null)
const workTime = ref([workTimeStart.value, workTimeEnd.value])
const size = ref('default')
const resultData = ref([])
const formalDate = 'yyyy-MM-dd HH:mm:ss'
import { format } from 'date-fns'
import { Search } from '@element-plus/icons-vue'

const sexOptions = [
  {
    value: '',
    label: '全部'
  },
  {
    value: '0',
    label: '男'
  },
  {
    value: '1',
    label: '女'
  }
]
const selectData = ref({
  pageNum: 1,
  pageSize: 10,
  request: {
    username: '',
    sex: '',
    region: '',
    birthdayTimeStart: '',
    birthdayTimeEnd: '',
    workTimeStart: '',
    workTimeEnd: ''
  }
})
const updateUser = ref({
  id: '',
  nickName: '',
  sex: '',
  region: '',
  birthdayTime: '',
  workTime: ''
})
const dateRangeBirthdayTime = computed({
  get() {
    return [selectData.value.request.birthdayTimeStart, selectData.value.request.birthdayTimeEnd]
  },
  set(val) {
    selectData.value.request.birthdayTimeStart = val[0]
    selectData.value.request.birthdayTimeEnd = val[1]
  }
})
const resetForm = () => {
  if (selectForm.value) {
    console.log("chognzhi")
    selectData.value.request = {
      username: '',
      sex: '',
      region: '',
      birthdayTimeStart: '',
      birthdayTimeEnd: '',
      workTimeStart: '',
      workTimeEnd: ''
    };
    workTime.value=''
    birthdayTime.value=''
    // 如果你需要重置 pageNum 和 pageSize，也可以在这里添加它们
    // selectData.value.pageNum = 1;
    // selectData.value.pageSize = 10;
  }
};
const dateRangeWorkTime = computed({
  get() {
    return [selectData.value.request.workTimeStart, selectData.value.request.workTimeEnd]
  },
  set(val) {
    selectData.value.request.workTimeStart = val[0]
    selectData.value.request.workTimeEnd = val[1]
  }
})
// 监听 dateRange 的变化，手动更新 startDate 和 endDate
watch(dateRangeBirthdayTime, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    if (newVal.length === 2) {
      selectData.value.request.birthdayTimeStart = newVal[0]
      selectData.value.request.birthdayTimeEnd = newVal[1]
    } else {
      selectData.value.request.birthdayTimeStart = ''
      selectData.value.request.birthdayTimeEnd = ''
    }
  }
})
watch(dateRangeWorkTime, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    if (newVal.length === 2) {
      selectData.value.request.workTimeStart = newVal[0]
      selectData.value.request.workTimeEnd = newVal[1]
    } else {
      selectData.value.request.workTimeStart = ''
      selectData.value.request.workTimeEnd = ''
    }
  }
})
const editFormDialog = (item) => {
  updateUser.value.id = item.id
  updateUser.value.nickName = item.nickName
  updateUser.value.sex = item.sex
  updateUser.value.region = item.region
  updateUser.value.birthdayTime = item.birthdayTime
  updateUser.value.workTime = item.workTime
  editDialog.value = true
  console.log('updateUSER', updateUser.value)
}
const birthdayTimeHandleDateRangeChange = (val) => {
  if (val != null) {
    selectData.value.request.birthdayTimeStart = format(val[0], formalDate)
    selectData.value.request.birthdayTimeEnd = format(val[1], formalDate)
  } else {
    selectData.value.request.birthdayTimeStart = ''
    selectData.value.request.birthdayTimeEnd = ''
  }
}
const workTimeHandleDateRangeChange = (val) => {
  if (val != null) {
    selectData.value.request.workTimeStart = format(val[0], formalDate)
    selectData.value.request.workTimeEnd = format(val[1], formalDate)
  } else {
    selectData.value.request.workTimeStart = ''
    selectData.value.request.workTimeEnd = ''
  }
}
const selectUserPageInfo = async () => {
  try {
    const response = await api({
      url: 'user/pageInfo',
      method: 'post',
      data: selectData.value
    })
    console.log('response', response)
    resultData.value = response.pageData
    console.log('data', resultData.value)
  } catch (error) {
    console.error('Error fetching data:', error)
    // 可以在这里处理错误，比如显示错误信息给用户
  }
}
const editUserPageInfo = async () => {
  try {
    const response = await api({
      url: 'user/updateInfo',
      method: 'post',
      data: updateUser.value
    })
    console.log('response', response)
  } catch (error) {
    console.error('Error fetching data:', error)
    // 可以在这里处理错误，比如显示错误信息给用户
  }
  editDialog.value = false
  await selectUserPageInfo()
}
</script>
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 0px 0;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 0px;
}
</style>
